<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" class="flex-row-left">
				<el-input  class="w-200 mr-10" placeholder="输入名称搜索" clearable />
				<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			</el-col>			
			<el-col :span="12" class="flex-row-right">
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			</el-col>
		 </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column type="selection" width="55" />	
		 	<el-table-column prop="id" label="ID"  width="55"/>
		 	<el-table-column prop="id" label="序号"  />
		 	<el-table-column prop="id" label="条码" width="120" />
		 	<el-table-column prop="id" label="客户" width="120"/>
			<el-table-column prop="id" label="分公司/分部" width="120"/>
			<el-table-column prop="id" label="部门" width="120"/>
			<el-table-column prop="id" label="顾问" width="120"/>
			<el-table-column prop="id" label="一般纳税人" width="120"/>
			<el-table-column prop="id" label="小规模" width="120"/>
			<el-table-column prop="id" label="个体户" width="120"/>
			<el-table-column prop="id" label="会计期间" width="120"/>
			<el-table-column prop="id" label="下单时间" width="120"/>
			<el-table-column prop="id" label="状态" width="120"/>
			<el-table-column prop="id" label="寄出快递名" width="120"/>
			<el-table-column prop="id" label="寄出快递号" width="120"/>
			<el-table-column prop="id" label="共享中心" width="120"/>
			<el-table-column prop="id" label="签收人" width="120"/>
			<el-table-column prop="id" label="签收时间" width="120"/>
			<el-table-column prop="id" label="审票人" width="120"/>
			<el-table-column prop="id" label="审票时间" width="120"/>
			<el-table-column prop="id" label="领取人" width="120"/>
			<el-table-column prop="id" label="领取时间" width="120"/>
			<el-table-column prop="id" label="录入完成人" width="120"/>
			<el-table-column prop="id" label="录入时间" width="120"/>
			<el-table-column prop="id" label="分派人" width="120"/>
			<el-table-column prop="id" label="分派时间" width="120"/>
			<el-table-column prop="id" label="分派领取时间" width="120"/>
			<el-table-column prop="id" label="审票人" width="120"/>
			<el-table-column prop="id" label="审票时间" width="120"/>
			<el-table-column prop="id" label="打印人" width="120"/>
			<el-table-column prop="id" label="打印时间" width="120"/>
			<el-table-column prop="id" label="装订人" width="120"/>
			<el-table-column prop="id" label="装订时间" width="120"/>
			<el-table-column prop="id" label="检查人" width="120"/>
			<el-table-column prop="id" label="检查时间" width="120"/>
			<el-table-column prop="id" label="票据数" width="120"/>
			<el-table-column prop="id" label="收入(不含税)" width="120"/>
			<el-table-column prop="id" label="税额" width="120"/>
			<el-table-column prop="id" label="记账难度" width="120"/>
			<el-table-column prop="id" label="票据状态(共)" width="120"/>
			<el-table-column prop="id" label="凭证状态(共)" width="120"/>
			<el-table-column prop="id" label="收件快递名" width="120"/>
			<el-table-column prop="id" label="快递状态(共)" width="120"/>
			<el-table-column prop="id" label="备注" width="120"/>
		 </el-table>
		 <div class="flex-row-right mt-20">
			 <el-pagination
			   :page-sizes="[100, 200, 300, 400]"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="400"
			 />
		 </div>
		 <cateForm 
		 :dialogVisible="dialogVisible" 
		 :width="40" 
		 @dialogVisibleByValue="dialogVisibleByValue"  
		 ref="cateForm"
		 />
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {	
				dialogVisible:false,
				value5:false,
				loading:true,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: '1',
				      },
				      {
				    	id: '2',
				      },
				      {
				    	id: '3',
				      },
				      {
				    	id: '4',
				      },
				      {
				    	id: '5',
				      },
				      {
				    	id: '6',
				      },
				      {
				    	id: '7',
				      },
				      {
				    	id: '8',
				      },
				      {
				    	id: '9',
				      },
				      {
				    	id: '10',
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
	.example-showcase .el-loading-mask {
	  z-index: 9;
	}
</style>
